<template>
  <div>
    <van-nav-bar title="搜索" left-arrow @click-left="$router.back()" />
    <van-search v-model="value" show-action placeholder="请输入商家或美食名称">
      <template #action>
        <div @click="onSearch">提交</div>
      </template>
    </van-search>
    <goods :obj="result[0]" v-if="falg"></goods>

    <div v-if="searchHistory.length && input">
      <h3>搜索历史</h3>
      <div v-for="(item, index) in searchHistory" :key="index" class="history">
        <a href="javascript:void(0)" @click="aFn(item)">{{ item }}</a>
        <span
          style="
            float: right;
            margin-right: 25px;
            font-size: 20px;
            height: 40px;
            line-height: 40px;
          "
          @click="remove(index)"
          >x</span
        >
      </div>
      <p v-if="searchHistory.length" @click="clear">清空搜索历史</p>
    </div>

    <!-- <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">外卖</van-tabbar-item>
      <van-tabbar-item icon="search" @click="$router.push('/search')"
        >搜索</van-tabbar-item
      >
      <van-tabbar-item icon="notes-o" @click="$router.push('/dingdan')"
        >订单</van-tabbar-item
      >
      <van-tabbar-item icon="user-o" @click="$router.push('/my')"
        >我的</van-tabbar-item
      >
    </van-tabbar> -->
    <myfooter :str="actives"></myfooter>
  </div>
</template>

<script>
import { search } from "../api/search";
import goods from "../components/goods.vue";
import myfooter from "../components/footer.vue";
export default {
  components: { goods, myfooter },
  data() {
    return {
      actives: "search",
      input: true,
      indexList: [],
      searchHistory: [],
      falg: false,
      active: 0,
      value: "",
      query: {
        geohash: "31.22967,121.4762",
        keyword: "",
        type: "search",
      },
      result: [
        {
          name: "肯德基",
          address: "上海市宝山区淞宝路155弄18号星月国际商务广场1层",
          id: 1,
          latitude: 31.38098,
          longitude: 121.50146,
          location: [121.50146, 31.38098],
          phone: "1232313124324",
          category: "快餐便当/简餐",
          supports: [
            {
              description: "已加入“外卖保”计划，食品安全有保障",
              icon_color: "999999",
              icon_name: "保",
              id: 7,
              name: "外卖保",
              _id: "591bec73c2bbc84a6328a1e5",
            },
            {
              description: "准时必达，超时秒赔",
              icon_color: "57A9FF",
              icon_name: "准",
              id: 9,
              name: "准时达",
              _id: "591bec73c2bbc84a6328a1e4",
            },
            {
              description: "该商家支持开发票，请在下单时填写好发票抬头",
              icon_color: "999999",
              icon_name: "票",
              id: 4,
              name: "开发票",
              _id: "591bec73c2bbc84a6328a1e3",
            },
          ],
          status: 0,
          recent_order_num: 615,
          rating_count: 389,
          rating: 1.6,
          promotion_info: "他依然有人有人有人有人有人",
          piecewise_agent_fee: {
            tips: "配送费约¥5",
          },
          opening_hours: ["8:30/20:30"],
          license: {
            catering_service_license_image: "",
            business_license_image: "",
          },
          is_new: true,
          is_premium: true,
          image_path: "/img/shop/15c1513a00615.jpg",
          identification: {
            registered_number: "",
            registered_address: "",
            operation_period: "",
            licenses_scope: "",
            licenses_number: "",
            licenses_date: "",
            legal_person: "",
            identificate_date: null,
            identificate_agency: "",
            company_name: "",
          },
          float_minimum_order_amount: 20,
          float_delivery_fee: 5,
          distance: "19.5公里",
          order_lead_time: "40分钟",
          description: "好吃的",
          delivery_mode: {
            color: "57A9FF",
            id: 1,
            is_solid: true,
            text: "蜂鸟专送",
          },
          activities: [
            {
              icon_name: "减",
              name: "满减优惠",
              description: "满30减5，满60减8",
              icon_color: "f07373",
              id: 1,
              _id: "591bec73c2bbc84a6328a1e7",
            },
            {
              icon_name: "特",
              name: "优惠大酬宾",
              description: "是对冯绍峰的上市房地产",
              icon_color: "EDC123",
              id: 2,
              _id: "591bec73c2bbc84a6328a1e6",
            },
          ],
        },
      ],
    };
  },
  methods: {
    onSearch() {
      if (!this.value) {
        this.$toast("搜索内容不能为空");
        return;
      } else {
        search(this.query).then((res) => {
          console.log(res);
        });
        this.falg = true;
        if (this.searchHistory.indexOf(this.value) == -1) {
          this.searchHistory.push(this.value);

          localStorage.setItem(
            "searchHistory",
            JSON.stringify(this.searchHistory)
          );
        }
        this.value = "";
      }
    },
    aFn(item) {
      this.value = item;
    },
    remove(index) {
      this.searchHistory.splice(index, 1);
      localStorage.setItem("searchHistory", JSON.stringify(this.searchHistory));
    },
    clear() {
      this.searchHistory = [];
      localStorage.setItem("searchHistory", JSON.stringify(this.searchHistory));
    },
  },
  created() {
    if (localStorage.getItem("searchHistory")) {
      this.searchHistory = JSON.parse(localStorage.getItem("searchHistory"));
    } else {
      this.searchHistory = [];
    }
  },
};
</script>

<style lang="less" scoped>
.history {
  border-bottom: 1px solid #ccc;
}
p {
  text-align: center;
  font-size: 25px;
  color: #3190e8;
}
a {
  text-decoration: none;
  color: #000;
  font-size: 20px;
  margin-left: 20px;
  height: 40px;
  line-height: 40px;
}
/deep/.van-nav-bar__content {
  background-color: #3190e8;

  .van-nav-bar__title {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
  }
  .van-icon-arrow-left:before {
    color: #fff;
  }
}
/deep/.van-field__left-icon {
  display: none;
}
/deep/.van-field__control[type="search"] {
  font-size: 18px;
  font-weight: 700;
}
/deep/.van-search__action {
  width: 50px;
  text-align: center;
  background-color: #3190e8;
  border-radius: 3px;
  margin-left: 10px;
  color: #fff;
  font-weight: 600;
}
</style>